<template>
    <div class="todo-wrap">
        <header>
            <h1>输入待办事项：</h1>
            <input type="checkbox" :checked="checkAll" @change="toggleAll(!checkAll)">
            <input type="text" placeholder="输入待办事项："  @keyup.enter="addTodo">
        </header>
        <div class="con">
            <todo-item v-for="(item,ind) in todos" :key="ind"
                :todo="item"
            ></todo-item>
        </div>
        <footer>
            <span>待办事项：{{activeCount}}</span>
            
        </footer>
    </div>
</template>
<script>
import todoItem from '../components/todoItem'
import {mapGetters} from 'vuex'
export default {
    created(){
        this.$store.dispatch('getTodos');
    },
    components:{
        todoItem
    },
    methods:{
        addTodo(e){
            let val = e.target.value.trim();
            this.$store.dispatch('addTodos',val);
            e.target.value = '';
        },
        toggleAll(checkAll){
            this.$store.dispatch('toggleAll',checkAll);
        }
    },
    computed: {
        todos(){
            return this.$store.state.todos
        },
        checkAll(){
            return this.$store.state.todos.every(item => item.done);
        },
        ...mapGetters(['activeCount'])
    },
}
</script>

